Runtime CSS-in-JS

概要

JavaScript または TypeScript のコードに CSS を直接記述するよう設計されたライブラリ

Component 内に CSS を定義することができ、外部の CSS ファイルに依存することなくコンポーネント単体で独立させることができる

アプリケーションの実行時にライブラリがスタイルを解釈して適用する

ライブラリ

問題点

1. 実行時のオーバーヘッド

コンポーネントがレンダリングされる際、スタイルをドキュメントに挿入するために変換処理が必要

この変換プロセスは追加の CPU サイクルを必要とする

このオーバーヘッドは、アプリケーションのパフォーマンスに影響を与える可能性がある

2. バンドルサイズの増加

ライブラリの JavaScript をダウンロードする必要があるため、サイトを訪れるユーザーのバンドルサイズが増加する

e.g.

Emotion: 7.9 kB

styled-components: 12.7 kB

3. React DevTools でのデバッグが難しくなる

内部的なコンポーネントを React のツリーに挿入するため、React DevTools が正常に動作しない可能性がある

4. ブラウザの追加作業

CSS ルールを頻繁に挿入することは、ブラウザに多くの追加作業を強いる

e.g.: React の並行レンダリングモード

新しいルールを挿入すると、ブラウザはそのルールが既存のツリーに適用されるかどうかを確認する必要がある

これにより、React がレンダリングしている間、すべての CSS ルールとすべての DOM ノードに対してスタイルの再計算が行われることになり、パフォーマンスが著しく低下する

5. SSR やコンポーネントライブラリとの互換性

Emotion を SSR や他の Emotion を使用するコンポーネントライブラリと組み合わせて使用する際には、以下のような問題が発生する可能性がある

Emotion のインスタンスが複数ロードされる

スタイルの挿入の順序を完全に制御できない

React 17 と 18 の間で Emotion の SSR サポートが異なる

解決策